<template>
	<div>
		<ul class="list">
			<li
				v-for="item of alphabetList"
				:key="item.id"
				@click="handleLetterClick"
			>{{item.content}}</li>
					
		</ul>
		<div 
			class="connect" 
			ref="distance"
			:style="hidden"
		>
			{{this.content}}
		</div>
	</div>
</template>

<script>
	export default {
		name:'locationAlphabet',
		methods:{
			handleLetterClick(e){
				this.content = e.target.innerText
				// console.log(this.content)
				this.$emit("change",this.content)
				for(let i=0;i<this.alphabetList.length;i++){
					if (this.content===this.alphabetList[i].content){
						let distance = 1.1+((i+1)*1.3)
						const showElement = this.$refs.distance						
						showElement.style = "display:block"
						showElement.style = "top:"+distance+"rem"
						setTimeout(function(){
							showElement.style = "display:none"
						},500)
					}					
				}
			}
		},
		props:{
			alphabetList:Array
		},
		data(){
			return {
				hidden:{
					display:'none'
				},
				content:'',
			// 	alphabetList:[
			// 		{
			// 			id:'00001',
			// 			content:'当前'
			// 		},
			// 		{
			// 			id:'00002',
			// 			content:'热门城市'
			// 		},
			// 		{
			// 			id:'00003',
			// 			content:'A'
			// 		},
			// 		{
			// 			id:'00004',
			// 			content:'B'
			// 		},
			// 		{
			// 			id:'00005',
			// 			content:'C'
			// 		},
			// 		{
			// 			id:'00006',
			// 			content:'D'
			// 		},
			// 		{
			// 			id:'00007',
			// 			content:'E'
			// 		},
			// 		{
			// 			id:'00008',
			// 			content:'F'
			// 		},
			// 		{
			// 			id:'00009',
			// 			content:'G'
			// 		}					
			// 	]
			// 
			}
		}
	}
</script>

<style lang="stylus" scoped>
.list
	position:fixed
	top:1.15rem
	right:0
	z-index:100
	text-align:center
	width:15%
	background:#eff1f5
	padding-bottom:100rem
	opacity:0.7
	color:#53cabf
.list>li
	margin:0.2rem 0
	font-weight:bold
.connect
	position:absolute
	top:1.1rem
	right:1.1rem
	z-index:100
	text-align:center
	background:rgba(80,180,0,.7)
	border-radius:.07rem
</style>
